import React, { useEffect, useState, useRef } from 'react'
import { DownloadOutlined } from '@ant-design/icons'
import {
  Button,
  Col,
  Flex,
  Form,
  Input,
  Row,
  Select,
  Typography,
  Table,
  Alert,
  Modal,
  Tabs
} from 'antd'
import MyDatePicker from '../components/MyDatePicker'
import BasicInfo from '../components/BasicInfo'
import BehaviorInteraction from '../components/BehaviorInteraction'
import CustomReturn from '../components/CustomReturn'
import { userList } from '../service/user'
import moment from 'moment'
import PlatformBasicInfo from '../components/PlatformBasicInfo'

export default function UserList() {
  // 保存选择的日期
  const [selectedDateString, setSelectedDateString] = useState(null)
  // 保存店铺列表
  const [storeList, setStoreList] = useState([])
  // 保存页码
  const [pageNo, setPageNo] = useState(1)
  // 总数据量
  const [total, setTotal] = useState(0)
  // 预设日期
  // 保存表格中选中的项
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 表格中是否有选中
  const hasSelected = selectedRowKeys.length > 0
  // 创建表单的引用
  const formRef = useRef()
  // 模态框
  const [isModalOpen, setIsModalOpen] = useState(false)
  // 模态框2
  const [isModalOpen2, setIsModalOpen2] = useState(false)
  // 搜索条件
  const [condition, setCondition] = useState({})
  // 用于更新列表
  const [n, setN] = useState(1)
  const request = async () => {
    const res = await userList({
      ...condition,
      pageNo,
      pageSize: 10
    })
    console.log(res)
    if (res.data) {
      setStoreList(res.data.objects)
      setTotal(res.data.total)
    }
  }
  useEffect(() => {
    request()
  }, [n, pageNo])

  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>信息管理</Typography.Title>
            {/* <Button type="primary" icon={<DownloadOutlined />}>
              数据下载
            </Button> */}
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form
            layout="inline"
            onFinish={async (values) => {
              // setCondition(values)
              // console.log(values)
              // await request()
              // setN(n + 1)
            }}
          >
            <Form.Item label="用户姓名：" name="storeName">
              <Input />
            </Form.Item>
            <Form.Item label="手机号：" name="storeHeadPhone">
              <Input type="phone" />
            </Form.Item>
            <Form.Item label="渠道来源：" name="storeAddress">
              <Select
                style={{ width: 200 }}
                placeholder="渠道选择"
                options={[
                  {
                    value: '',
                    label: '全部'
                  },
                  {
                    value: '0',
                    label: 'APP'
                  },
                  {
                    value: '1',
                    label: '小程序'
                  },
                  {
                    value: '2',
                    label: '支付宝生活号'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item label="注册时间">
              <MyDatePicker
                selectedDateString={selectedDateString}
                setSelectedDateString={setSelectedDateString}
              />
            </Form.Item>

            <Form.Item>
              <Button type="default" htmlType="reset">
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Typography.Paragraph style={{ fontSize: 16 }}>
            用户列表
          </Typography.Paragraph>
          {hasSelected && (
            <Alert
              message={`已经选择 ${selectedRowKeys.length} 项`}
              type="info"
              showIcon
            />
          )}
        </Col>
        <Col span={24}>
          <Table
            pagination={{
              total,
              defaultCurrent: 1,
              onChange: async (page) => {
                setPageNo(page)
              }
            }}
            rowKey="id"
            rowSelection={{
              selectedRowKeys,
              onChange: (newSelectedRowKeys) => {
                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                setSelectedRowKeys(newSelectedRowKeys)
              }
            }}
            dataSource={storeList}
            columns={[
              {
                title: '编号',
                dataIndex: 'id',
                key: 'id'
              },
              {
                title: '昵称',
                dataIndex: 'nickName',
                key: 'nickName'
              },
              {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
                render: (text, record) => <>男</>
              },
              {
                title: '手机号',
                dataIndex: 'phone',
                key: 'phone'
              },
              {
                title: '账号',
                dataIndex: 'userName',
                key: 'userName'
              },
              {
                title: '用户标签',
                dataIndex: 'storeHeadPhone',
                key: 'storeHeadPhone',
                render: (_, record) => {
                  return <>查看（5）</>
                }
              },
              {
                title: '注册渠道',
                dataIndex: 'providerType',
                key: 'providerType',
                render: (_, record) => {
                  switch (record.providerType) {
                    case 0:
                      return 'APP'
                    case 1:
                      return '小程序'
                    case 2:
                      return '支付宝生活号'
                    default:
                      return '未知'
                  }
                }
              },
              {
                title: '最近登录时间',
                dataIndex: 'lastLogTime',
                key: 'lastLogTime',
                render: (_, record) => {
                  return (
                    <>
                      {moment(record.lastLogTime).format('YYYY-MM-DD HH:mm:ss')}
                    </>
                  )
                }
              },
              {
                title: '注册时间',
                dataIndex: 'regTime',
                key: 'regTime',
                render: (_, record) => {
                  return (
                    <>{moment(record.regTime).format('YYYY-MM-DD HH:mm:ss')}</>
                  )
                }
              },
              {
                title: '操作',
                dataIndex: 'op',
                key: 'op',
                align: 'center',
                render: (_, record) => {
                  return (
                    <span className="op">
                      <a
                        onClick={() => {
                          // 获取当前登录的管理员信息，模态框1-商家  2-平台(当前)
                          setIsModalOpen2(true)
                        }}
                      >
                        详情
                      </a>
                    </span>
                  )
                }
              }
            ]}
          />
        </Col>
      </Row>
      <Modal
        title="用户详情"
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        maskClosable={false}
        width={750}
        destroyOnClose
        footer={null}
      >
        <Tabs
          style={{ paddingBottom: 20, height: 600 }}
          items={[
            {
              key: '1',
              label: '基本信息',
              children: <BasicInfo />
            },
            {
              key: '2',
              label: '行为互动',
              children: <BehaviorInteraction />
            },
            {
              key: '3',
              label: '客户回访',
              children: <CustomReturn />
            }
          ]}
        />
      </Modal>
      <Modal
        title="用户详情"
        open={isModalOpen2}
        onCancel={() => setIsModalOpen2(false)}
        maskClosable={false}
        width={750}
        destroyOnClose
        footer={null}
      >
        <Tabs
          style={{ paddingBottom: 20, height: 470 }}
          items={[
            {
              key: '1',
              label: '基本信息',
              children: <PlatformBasicInfo />
            }
          ]}
        />
      </Modal>
    </>
  )
}
